import React, { Component } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Card, Checkbox, Form, Input, message } from 'antd';
import './Login.css'
import { setToken } from '../../utils/auth';
import { loginApi } from '../../service/auth';

export default class Login extends Component {

    onFinish = (values) => {
        loginApi({
            "username": values.username,
            "password": values.password
        }).then(res => {
            console.log(res)
            setToken(res.token)
            this.props.history.push('/admin')
        }).catch(err => {
            console.log(err)
            message.info(err.response.data)
        })
    };

    render() {
        return (
            <Card title="QX管理系统" className='form_container'>
                <Form
                    name="normal_login"
                    initialValues={{
                        remember: true,
                        username: 'yangxiaoliang',
                        password: '1234567890'
                    }}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Username!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Password!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item name="remember" valuePropName="checked" >
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        )
    }
}
